<template>
  <div class="main">
    <div class="card">
      <div class="card-top flex">
        <div class="nav-container flex-center flex-align-items-center">
          <img src="@/assets/icon-1.png">
          <span class="font-16">youtube</span>
        </div>
      </div>
      <div class="card-body flex-between">
        <div class="left flex">
          <div class="card-body-avatar">
            <img :src="info.avatar">
            <span class="font-18-B">{{ info.score }}</span>
          </div>
          <div class="card-body-info flex-between flex-column">
            <div class="flex flex-align-items-center">
              <p class="card-body-name font-20-B">{{ info.name }}</p>
              <p class="card-body-country flex flex-align-items-center">
                <i class="iconfont icon-weizhi"></i>
                <span class="font-14">{{ info.country }}</span>
              </p>
            </div>
            <div class="card-body-data flex">
              <div class="data-item">
                <p class="font-18-B">{{ numConvert(info.num, 2) }}</p>
                <p class="font-14">粉丝数</p>
              </div>
              <div class="data-item">
                <p class="font-18-B">{{ numConvert(info.num, 2) }}</p>
                <p class="font-14">平均观看量</p>
              </div>
              <div class="data-item">
                <p class="font-18-B">{{ info.rate }}</p>
                <p class="font-14">平均互动率</p>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <textarea></textarea>
        </div>
      </div>
      <div class="card-info flex">
        <a href="https://www.baidu.com" target="_blank" class="flex flex-align-items-center pointer">
          <i class="iconfont icon-zhuye"></i>
          <span class="font-16">访问主页</span>
        </a>
        <div class="flex flex-align-items-center pointer" @click="editRecordShow = true">
          <i class="iconfont icon-jilu"></i>
          <span class="font-16">编辑历史记录</span>
        </div>
      </div>
    </div>

    <div v-for="(item, index) in list" :key="index" class="card-item">
      <p class="card-title font-16 flex flex-align-items-center">{{ item.title }}</p>
      <div v-if="!item.edit" class="item-edit flex flex-align-items-center pointer" @click="editHandle(index)">
        <i class="iconfont icon-bianji1"></i>
        <span class="font-16">编辑</span>
      </div>
      <div v-else-if="item.isAdd" class="item-edit flex flex-align-items-center pointer" @click="addHandle(index)">
        <i class="iconfont icon-bianji1"></i>
        <span class="font-16">新增收款信息</span>
      </div>
      <div v-if="!item.edit" class="item-form">
        <div v-for="(item1, index1) in item.list" :key="index1" class="item flex">
          <div class="form-main flex flex-wrap">
            <div v-for="(formItem, formIndex) in item1" :key="formIndex" class="form-item flex flex-align-items-center"
              :style="formItem.style">
              <p class="form-label font-14">{{ formItem.label }}</p>
              <p class="form-value font-14">
                {{ formItem.type === 'inputRange' ? formItem.value.join(' - ') : formItem.value }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div v-if="item.edit" class="item-form">
        <div v-for="(item1, index1) in item.editList" :key="index1" class="item flex">
          <div class="form-main flex flex-wrap">
            <div v-for="(formItem, formIndex) in item1" :key="formIndex" class="form-item flex flex-align-items-center"
              :style="formItem.style">
              <p class="form-label font-14">{{ formItem.label }}</p>
              <el-input v-if="formItem.type === 'input'" v-model="formItem.value" :placeholder="formItem.placeholder"
                class="form-input"></el-input>
              <el-select v-if="formItem.type === 'select'" v-model="formItem.value" class="form-select">
                <el-option v-for="(option, optionIndex) in formItem.options" :key="optionIndex" :label="option"
                  :value="option"></el-option>
              </el-select>
              <div v-if="formItem.type === 'inputRange'" class="form-input-range flex flex-align-items-center">
                <el-input v-model="formItem.value[0]" type="number" class="form-input"></el-input>
                <span class="font-14">至</span>
                <el-input v-model="formItem.value[1]" type="number" class="form-input"></el-input>
              </div>
            </div>
          </div>
          <i v-if="item.editList.length > 1" class="item-del iconfont icon-shanchu pointer"
            @click="delHandle(index, index1)"></i>
        </div>
      </div>
      <div v-if="item.edit" class="item-btns flex">
        <p class="font-16 pointer" @click="cancelEditHandle(index)">取消</p>
        <p class="font-16 pointer">保存</p>
      </div>
    </div>
  </div>

  <edit-record v-if="editRecordShow" @close="editRecordShow = false"></edit-record>
</template>

<script setup>
import EditRecord from './components/editRecord.vue';
import { ref, onMounted } from 'vue';
import api from '@/api/index.js';
import numConvert from '@/js/numConvert.js';
import data from '@/js/data.js';

const editRecordShow = ref(false);
const info = ref({
  avatar: 'https://img-cdn.wotokol.com/images/1/avatar/A887E769EF241112546280E76ADC5E1DABD81159BA3F7F78C66642399B70D4A9BF0B0133836B1FFEB8FFA92C86FC2BC5719BCF018FB288987DCA9F34ADC08E03E4C7452842BC4ADD30B541D8A4498B59D12548C751C100DE5CD7FAB0212D591B18DCF011A2AE3A08ECD6E45B0ADF76E8.jpg',
  score: 3.5,
  name: 'xxxx',
  country: 'xxx',
  num: 11111,
  rate: '5%'
});
const list = ref([
  {
    title: '标签信息',
    list: [
      [
        {
          label: '标签',
          value: '娱乐,家居园艺',
          type: 'txt',
          style: { flex: '0 0 100%', borderBottom: 'none' }
        },
        {
          label: '红人画像',
          type: 'select',
          style: { borderRight: 'none' },
          options: ['测评类', '好物推荐', '吃播探店', '实验类', '剧情类', '幽默搞笑', '清洁收纳类', '家庭生活', '烹饪类', 'vlog', 'DIY', 'reaction', '街头采访', 'ASMR', '妆容类', '护肤类', '户外旅行', '公益环保']
        },
        {
          label: '频道风格',
          type: 'select',
          style: { borderRight: 'none' },
          options: ['调性高端', '美女', '帅哥', '性感', '情侣', '明星', '美食达人', '健身达人', '科技达人', '动手达人', '教育达人', '育儿专家', '有孩子', '有宠物', '有庭院', '有泳池', '旅行', '绘画', '音乐', '冒险', '体育', '美妆达人', '穿搭达人', '农业园林']
        },
        {
          label: '自定义',
          type: 'input',
          placeholder: '请输入'
        }
      ]
    ]
  },
  {
    title: '基本信息',
    list: [
      [
        {
          label: '语系',
          type: 'select',
          style: { borderRight: 'none' },
          options: data.langList
        },
        {
          label: '肤色',
          type: 'select',
          options: data.colourList
        }
      ]
    ]
  },
  {
    title: '报价信息',
    isAdd: true,
    list: [
      [
        {
          label: '报价区间($)',
          value: [],
          style: { borderRight: 'none' },
          type: 'inputRange'
        },
        {
          label: '报价说明',
          type: 'input'
        }
      ]
    ]
  },
  {
    title: '邮箱信息',
    isAdd: true,
    list: [
      [
        {
          label: '收件人',
          type: 'input',
          style: { borderRight: 'none' }
        },
        {
          label: '邮箱地址',
          type: 'input'
        }
      ]
    ]
  },
  {
    title: '联系信息',
    isAdd: true,
    list: [
      [
        {
          label: '联系方式',
          type: 'select',
          style: { borderRight: 'none' },
          options: data.contactList
        },
        {
          label: '号码',
          type: 'input'
        }
      ]
    ]
  },
  {
    title: '收款信息',
    isAdd: true,
    list: [
      [
        {
          label: '收款方式',
          type: 'select',
          style: { borderRight: 'none' },
          options: data.collectionList
        },
        {
          label: '收款人',
          style: { borderRight: 'none' },
          type: 'input'
        },
        {
          label: '银行名称',
          style: { borderRight: 'none' },
          type: 'input'
        },
        {
          label: '银行卡号',
          type: 'input'
        },
        {
          label: '备注',
          type: 'input',
          style: { flex: '0 0 100%', borderTop: 'none' }
        }
      ]
    ]
  },
  {
    title: '收货地址',
    isAdd: true,
    list: [
      [
        {
          label: '收件人',
          type: 'input',
          style: { flex: '0 0 33.33%', borderRight: 'none' },
          placeholder: '请输入收件人'
        },
        {
          label: '联系方式',
          type: 'input',
          style: { flex: '0 0 33.33%', borderRight: 'none' },
          placeholder: '请填写联系方式'
        },
        {
          label: '邮编',
          type: 'input',
          style: { flex: '0 0 33.33%' },
          placeholder: '请填写邮箱'
        },
        {
          label: '收获地址',
          type: 'input',
          style: { flex: '0 0 50%', borderTop: 'none', borderRight: 'none' },
          placeholder: '请输入收货地址'
        },
        {
          label: '备注',
          type: 'input',
          style: { flex: '0 0 50%', borderTop: 'none' },
          placeholder: '请填写备注'
        }
      ]
    ]
  }
]);

const editHandle = index => {
  list.value[index].editList = [
    ...list.value[index].list
  ];
  list.value[index].edit = true;
}
const cancelEditHandle = index => {
  list.value[index].edit = false;
}
const addHandle = index => {
  const obj = [];
  list.value[index].list[0].forEach(item => {
    obj.push({
      ...item,
      value: item.type === 'inputRange' ? [] : null
    });
  });
  list.value[index].editList.push(obj);
}
const delHandle = (index, index1) => {
  list.value[index].editList.splice(index1, 1);
}

onMounted(() => {
});
</script>

<style lang="less" scoped>
.main {
  padding: 24px 16px;
}

.card {
  position: relative;

  .card-top {
    background-image: url(@/assets/cardTop.svg);
    height: 66px;
    width: 416px;
    background-size: 100% 100%;
    padding-top: 16px;
    padding-left: 16px;

    .nav-container {
      width: 118px;
      height: 44px;
      border-radius: 10px;
      border: 1px solid @main-color;
      background: rgba(255, 82, 119, .1);

      img {
        width: 32px;
        margin-right: 5px;
      }
    }
  }

  .card-body {
    border-radius: 20px;
    border-top-left-radius: 0;
    background: #fff;
    padding: 24px;

    .left {
      .card-body-avatar {
        width: 100px;
        height: 100px;
        position: relative;
        margin-right: 16px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }

        span {
          position: absolute;
          left: 0;
          bottom: 0;
          z-index: 10;
          width: 100%;
          height: 50px;
          text-align: center;
          line-height: 50px;
          color: #fff;
        }
      }

      .card-body-info {
        .card-body-name {
          color: #333;
          margin-right: 8px;
        }

        .card-body-country {
          i {
            color: #d8d8d8;
            margin-right: 6px;
          }

          span {
            color: #666;
          }
        }

        .card-body-data {
          .data-item {
            width: 140px;
            height: 50px;
            border-left: 1px solid #ededed;
            padding-left: 18px;
            margin-right: 10px;

            p {
              &:first-child {
                color: #333;
                margin-bottom: 5px;
              }

              &:last-child {
                color: #999;
              }
            }
          }
        }
      }
    }

    .right {
      padding-top: 12px;
      padding-right: 23px;
      width: 401px;
      height: 100px;
      background-image: url(@/assets/areabg.svg);
      background-size: cover;
      position: relative;

      textarea {
        position: absolute;
        top: 20px;
        left: 0;
        padding: 5px 15px;
        line-height: 1.5;
        width: 100%;
        height: 75px;
        color: #606266;
        background: transparent;
        border: none;
      }
    }
  }

  .card-info {
    position: absolute;
    top: 16px;
    right: 20px;

    div,
    a {
      margin-left: 20px;
      height: 44px;
      text-decoration: none;

      i {
        color: @main-color;
        margin-right: 5px;
      }

      span {
        color: @main-color;
      }
    }
  }
}

.card-item {
  padding: 24px;
  position: relative;
  border-radius: 16px;
  background: #fff;
  margin-top: 16px;

  .card-title {
    color: #333;
    margin-bottom: 24px;

    &::before {
      content: "";
      display: block;
      width: 9px;
      height: 9px;
      background: @main-color;
      border-radius: 5px;
      margin-right: 6px;
    }
  }

  .item-edit {
    position: absolute;
    right: 24px;
    top: 24px;

    i {
      color: @main-color;
      margin-right: 5px;
    }

    span {
      color: @main-color;
    }
  }

  .item-form {
    .item {
      margin-bottom: 24px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .form-main {
      flex: 1;

      .form-item {
        flex: 1;
        border: 1px solid #e5e6eb;

        &::v-deep {
          .el-input__wrapper {
            box-shadow: none !important;
          }
        }

        .form-label {
          width: 100px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          border-right: 1px solid #e5e6eb;
          color: #333;
          background: #f2f3f5;
        }

        .form-value {
          flex: 1;
          color: #333;
          padding: 0 10px;
        }

        .form-input,
        .form-select {
          flex: 1;
        }

        .form-input-range {
          span {
            color: #333;
            margin: 0 5px;
          }
        }
      }
    }

    .item-del {
      font-size: 18px;
      margin-left: 8px;
      position: relative;
      top: 12px;
    }
  }

  .item-btns {
    justify-content: end;
    margin-top: 24px;

    p {
      width: 64px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      border-radius: 6px;
      margin-left: 16px;

      &:first-child {
        background: #f8f8f8;
        color: #666;
      }

      &:last-child {
        background: @main-color;
        color: #fff;
      }
    }
  }
}
</style>
